<template>
  <!-- <div style="height:400px;width: 100%">
      <div ref="myEchart" id="myEchart":style="{height:'100%',width: '100%'}"></div>
  </div> -->
  <div class="layout" style="height: 100%;">
    <el-tabs v-model="activeName2" type="border-card" style="height: 100%;">
        <div class="container">
          <div ref="myEchart" id="myEchart":style="{height:'100%',width: '100%'}"></div>
        </div>
    </el-tabs>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
import ajax from 'ajax'
import $ from 'jquery'
export default {
  data () {
    return {
      activeIndex: '',//导航栏激活的下标
      activeName2:'first',//标签页默认值
    }
  },
  created () {
    this.initData ()
  },
  mounted(){
    this.initChart()
  },
  methods: {
    initData () {
      console.log('true')
    },
    // 初始化地图
    initChart () {
      // 基于准备好的dom，初始化echarts实例
      // var myChart = this.$echarts.init(this.$refs.myEchart)
      var dom = document.getElementById("myEchart");
      var myChart = this.$echarts.init(dom);
      myChart.showLoading();
      myChart.hideLoading();
      var categories = [];
        for (var i = 0; i < 9; i++) {
            categories[i] = {
                name: '类目' + i
            };
        }
      // 指定图表的配置项和数据
      var option = {
        // title: {
        //     text: '数据地图'
        // },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
        series : [
            {
                type: 'graph',
                layout: '',
                // layout: 'force',
                color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
                legendHoverLink : true,//启动联动高亮
                // hoverAnimation : true,
                symbolSize: 50,//节点标记的大小
                // roam: true,//开启鼠标缩放和平移漫游
                draggable : true,//节点可拖拽
                focusNodeAdjacency: true,//鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点
                label: {
                    normal: {
                        show: true//正常状态显示标签
                    },
                    emphasis : {
                      show: true//高亮显示标签
                    }
                },
                edgeSymbol: ['arrow'],
                edgeSymbolSize: [10, 20],
                edgeLabel: {
                    normal: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },//线上标签
                lineStyle: {
                    normal: {
                        opacity: 0.9,
                        width: 3,
                        curveness: 0//边的曲度
                    }
                },//公共线条样式
                categories : [
                  {name : '类目1',symbol: 'circle',symbolSize: '100'},
                  {name : '类目2',symbol: 'circle',symbolSize: '100'},
                  {name : '类目3',symbol: 'circle',symbolSize: '100'},
                  {name : '类目4',symbol: 'circle',symbolSize: '100'}
                ],
                data: [
                  //业务系统
                  {id:0,category:0,name:'反潜导弹系统',symbolSize:50,x: 0,y: 0},
                  {id:1,category:1,name:'业务子系统1',symbolSize:50,x: 0,y: 700},
                  //ETL
                  {id:2,category:1,name:'通信系统',symbolSize:50,x: 750,y: 0},
                  {id:3,category:2,name:'业务子系统2',symbolSize:50,x: 750,y: 850},
                  //数据仓库
                  {id:4,category:2,name:'雷达探测系统',symbolSize:50,x: 1500,y: 700},
                  {id:5,category:2,name:'业务子系统3',symbolSize:50,x: 1700,y: 700},
                  {id:6,category:2,name:'业务子系统4',symbolSize:50,x: 1800,y: 300},
                  {id:7,category:2,name:'业务子系统5',symbolSize:50,x: 1600,y: 0},
                  {id:8,category:2,name:'业务子系统6',symbolSize:50,x: 1600,y: 0},
                  //一级
                  {id:9,category:2,name:'业务系统',symbolSize:70,x: 0,y: 400},
                  {id:10,category:2,name:'ETL',symbolSize:70,x: 750,y: 600},
                  {id:11,category:2,name:'数据仓库',symbolSize:70,x: 1500,y: 400},
                  //三级
                  //业务系统
                  {id:12,category:2,name:'业务系统数据源1',symbolSize:30,x: 0,y: -500,label: {normal: {show: false},emphasis :{show: true}}},
                  {id:13,category:2,name:'业务系统数据源2',symbolSize:30,x: 200,y: -470,label: {normal: {show: false},emphasis :{show: true}}},
                  {id:14,category:2,name:'业务系统数据源3',symbolSize:30,x: -200,y: -470,label: {normal: {show: false},emphasis :{show: true}}},
                  {id:15,category:2,name:'业务系统数据源4',symbolSize:30,x: -400,y: -300,label: {normal: {show: false},emphasis :{show: true}}},

                  {id:16,category:2,name:'业务系统数据源5',symbolSize:30,x: 0,y: 1500,label: {normal: {show: false},emphasis :{show: true}}},
                  {id:17,category:2,name:'业务系统数据源6',symbolSize:30,x: 200,y: 1200,label: {normal: {show: false},emphasis :{show: true}}},
                  {id:18,category:2,name:'业务系统数据源7',symbolSize:30,x: -200,y: 1500,label: {normal: {show: false},emphasis :{show: true}}},
                  {id:19,category:2,name:'业务系统数据源8',symbolSize:30,x: -400,y: 1200,label: {normal: {show: false},emphasis :{show: true}}},
                  {id:20,category:2,name:'业务系统数据源8',symbolSize:30,x: -600,y: 1000,label: {normal: {show: false},emphasis :{show: true}}},
                  //数据仓库
                  {id:21,category:2,name:'数据仓库数据源1',symbolSize:30,x: 1000,y: -300,label: {normal: {show: false},emphasis :{show: true}}},
                  {id:22,category:2,name:'数据仓库数据源2',symbolSize:30,x: 1500,y: -470,label: {normal: {show: false},emphasis :{show: true}}},
                  {id:23,category:2,name:'数据仓库数据源3',symbolSize:30,x: 1700,y: -470,label: {normal: {show: false},emphasis :{show: true}}},
                  {id:24,category:2,name:'数据仓库数据源4',symbolSize:30,x: 2000,y: -300,label: {normal: {show: false},emphasis :{show: true}}},

                  {id:25,category:2,name:'数据仓库数据源5',symbolSize:30,x: 2000,y: 100,label: {normal: {show: false},emphasis :{show: true}}},
                  {id:26,category:2,name:'数据仓库数据源6',symbolSize:30,x: 2200,y: 300,label: {normal: {show: false},emphasis :{show: true}}},
                  {id:27,category:2,name:'数据仓库数据源7',symbolSize:30,x: 2200,y: 500,label: {normal: {show: false},emphasis :{show: true}}},
                  {id:28,category:2,name:'数据仓库数据源8',symbolSize:30,x: 2000,y: 700,label: {normal: {show: false},emphasis :{show: true}}},
                  ],
                links: [
                    //与业务系统的关联
                    { "source": 0, "target": 9},
                    { "source": 1, "target": 9},
                    { "source": 12, "target": 0},
                    { "source": 13, "target": 0},
                    { "source": 14, "target": 0},
                    { "source": 15, "target": 0},
                    { "source": 16, "target": 1},
                    { "source": 17, "target": 1},
                    { "source": 18, "target": 1},
                    { "source": 19, "target": 1},
                    { "source": 20, "target": 1},
                    //ETL的关联
                    { "source": 2, "target": 10},
                    { "source": 3, "target": 10},
                    //数据仓库
                    { "source": 4, "target": 11},
                    { "source": 5, "target": 11},
                    { "source": 6, "target": 11},
                    { "source": 7, "target": 11},
                    { "source": 8, "target": 11},
                    { "source": 21, "target": 8},
                    { "source": 22, "target": 8},
                    { "source": 23, "target": 8},
                    { "source": 24, "target": 8},
                    { "source": 25, "target": 6},
                    { "source": 26, "target": 6},
                    { "source": 27, "target": 6},
                    { "source": 28, "target": 6},
                    {
                      "source": 10,
                      "target": 9,
                      lineStyle: {
                        normal: { curveness: 0.3 }
                      }
                    },
                    { "source": 11,
                      "target": 10,
                      lineStyle: {
                        normal: { curveness: 0.3 }
                      }
                    }
                  ]
            }
        ]
    };
      // 绘制图表
      myChart.setOption(option)
      //添加点击事件
      myChart.on('click', function (params) {
          // 控制台打印数据的名称
          console.log(params);
      });
    }
  }
}
</script>

<style  scoped>
.container {
  height:800px;
  /* overflow-y: scroll;
  overflow-x: hidden; */
}
</style>
